<template>
  <el-dialog :visible.sync="dialogVisible" :fullscreen="true">
    <el-row class="el-low-c" type="flex" justify="start" align="middle">
      <el-col class="el-span-c">
        <span>代号</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input v-model="combinationmodelInJson.Code"></el-input>
      </el-col>
      <el-col class="el-span-c">
        <span>名称</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input v-model="combinationmodelInJson.Name"></el-input>
      </el-col>
      <el-col class="el-span-c">
        <span>开始日期</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-date-picker type="date" placeholder="选择日期" v-model="combinationmodelInJson.OpenDate"></el-date-picker>
      </el-col>
      <el-col class="el-span-c">
        <span>结束日期</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-date-picker type="date" placeholder="选择日期" v-model="combinationmodelInJson.DueDate"></el-date-picker>
      </el-col>
    </el-row>
    <el-row class="el-low-c" type="flex" justify="start" align="middle">
      <el-col class="el-span-c">
        <span>产品</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input  v-model="combinationmodelInJson.Production">
          <el-button slot="append" icon="el-icon-search" @click="pickerVisible2=true"></el-button>
        </el-input>
      </el-col>
      <el-col class="el-span-c">
        <span>品号</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input :disabled="true" :value="combinationmodelInJson.ProductionCode"></el-input>
      </el-col>
      <el-col class="el-span-c">
        <span>品名</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input :disabled="true" :value="combinationmodelInJson.ProductionName"></el-input>
      </el-col>
      <el-col class="el-span-c">
        <span>规格</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input :disabled="true" :value="combinationmodelInJson.ProductionStd"></el-input>
      </el-col>
    </el-row>
    <el-row class="el-low-c" type="flex" justify="start" align="middle">
      <el-col class="el-span-c">
        <span>备注</span>
      </el-col>
      <el-col class="el-input-large-c">
        <el-input :value="combinationmodelInJson.Note"></el-input>
      </el-col>
    </el-row>
    <div>
      <ElementGridEditor ref="ege" :rowData="combinationdetailInJson"/>
    </div>
    <div
      slot="title"
      style="border-bottom: 1px dashed #dcdfe6;font-size: larger;padding-bottom: 10px;"
    >
      <span>数据管理</span>
      <hr style="border:1 dashed " width="100%" color="#DCDFE6" size="1">
      <div>
        <el-button-group>
          <el-button size="mini" type="primary" @click="onSubmit">保存</el-button>
        </el-button-group>
        <el-button-group>
          <el-button
            size="mini"
            :disabled="!combinationmodelInJson.Code||combinationmodelInJson.Code===''"
            @click="pickerVisible = true"
          >增行</el-button>
          <el-button size="mini" :disabled="combinationdetailInJson.length===0" @click="rmRow">删行</el-button>
        </el-button-group>
        <el-button-group>
          <el-button size="mini" @click="dialogVisible = false">关闭</el-button>
        </el-button-group>
      </div>
    </div>
    <div slot="footer" style="border-top: 1px dashed #dcdfe6;font-size: larger;padding-top: 10px;"></div>
    <el-dialog :visible.sync="pickerVisible" :modal="false">
      <ProductionPicker
        :multiple="true"
        :autoset="true"
        @confirm="addRow"
        @ignore="pickerVisible=false"
        :conditions="[{'Key':'Combination','Op':'=','Value':0}]"
      />
    </el-dialog>
    <el-dialog :visible.sync="pickerVisible2" :modal="false">
      <ProductionPicker
        @confirm="productionSelected"
        :autoset="true"
        v-model="combinationmodelInJson.Production"
        :conditions="[{'Key':'Combination','Op':'=','Value':1}]"
      />
    </el-dialog>
  </el-dialog>
</template>
<script>
import ElementGridEditor from '@/components/GridEditor/ElementGridEditor.vue'
import ProductionPicker from '@/components/DataPicker/ProductionPicker.vue'
import { setCombination, get } from '@/api/combination'
import { Model } from 'vue-property-decorator'
import { warn } from 'vue-class-component/lib/util'

export default {
  components: {
    ElementGridEditor,
    ProductionPicker
  },
  data() {
    return {
      dialogVisible: false,
      combinationmodelInJson: {},
      combinationdetailInJson: [],
      pickerVisible: false,
      pickerVisible2: false
    }
  },
  watch: {
    combinationmodel: function(value) {
      this.combinationmodelInJson = value
      if (
        this.combinationmodelInJson &&
        this.combinationmodelInJson.AutoId > 0
      ) {
        get(this.combinationmodelInJson.AutoId)
          .then(response => {
            if (response.Result === 0) {
              this.combinationdetailInJson = response.Detail
            } else {
              this.$alert(response.Message, '获取数据失败')
            }
          })
          .catch(error => {
            console.log(error)
          })
      } else {
        this.combinationdetailInJson = []
      }
    }
  },
  computed: {
    levelName: function() {
      if (this.combinationmodelInJson.Level <= 5) {
        return '档案型'
      } else {
        return '数值型'
      }
    }
  },
  props: { combinationmodel: Object },
  methods: {
    onSubmit() {
      setCombination(this.combinationmodelInJson, this.combinationdetailInJson)
        .then(response => {
          if (response.Result === 0) {
            this.combinationmodelInJson = response.Data
            this.combinationdetailInJson = response.Detail
            this.$message('保存成功')
            this.$emit('combinationSaveComplete', this.combinationmodelInJson)
          } else {
            this.$alert(response.Message, '失败')
          }
        })
        .catch(error => {
          // this.$alert(error, '错误')
        })
    },
    productionSelected(data) {
      this.combinationmodelInJson.Production = data[0].AutoId
      this.combinationmodelInJson.ProductionCode = data[0].Code
      this.combinationmodelInJson.ProductionName = data[0].Name
      this.combinationmodelInJson.ProductionStd = data[0].Specification
      this.pickerVisible2 = false
    },
    addRow(productions) {
      for (let midx in productions) {
        let minTmpid = 0
        let skip = false
        for (let idx in this.combinationdetailInJson) {
          if (
            this.combinationdetailInJson[idx].minTmpid &&
            this.combinationdetailInJson[idx].minTmpid < minTmpid
          ) {
            minTmpid = this.combinationdetailInJson[idx].minTmpid
          }
          if (
            this.combinationdetailInJson[idx].Production ===
            productions[midx].AutoId
          ) {
            this.$message('production=' + productions[midx].Name + '已存在')
            skip = true
            break
          }
        }
        if (skip) {
          continue
        }
        this.combinationdetailInJson.push({
          AutoId: 0,
          minTmpid: minTmpid - 1,
          Combination: this.combinationmodelInJson.AutoId
            ? this.combinationmodelInJson.AutoId
            : 0,
          Production: productions[midx].AutoId,
          ProductionStd: productions[midx].Specification,
          ProductionCode: productions[midx].Code,
          ProductionName: productions[midx].Name,
          Code: this.combinationmodelInJson.Code + '-' + productions[midx].Code,
          Quantity: 1
        })
      }
      this.pickerVisible = false
    },
    rmRow() {
      const selectedData = this.$refs.ege.getSelected()
      if (selectedData.length === 0) {
        this.$message('请先选中需要删除的行')
        return
      }
      this.$confirm(
        '将会删除' + selectedData.length + '笔记录, 是否继续?',
        '提示',
        { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
      )
        .then(() => {
          for (let idx in selectedData) {
            for (let rIdx in this.combinationdetailInJson) {
              if (
                (selectedData[idx].minTmpid &&
                  this.combinationdetailInJson[rIdx].AutoId) ||
                selectedData[idx].AutoId ===
                  this.combinationdetailInJson[rIdx].AutoId
              ) {
                this.combinationdetailInJson.splice(rIdx, 1)
                break
              }
            }
          }
        })
        .catch(error => {})
    }
  }
}
</script>

<style>
.el-span-c {
  padding: 5px;
  height: 40px;
  width: 100px;
  line-height: 30px;
  text-align: right;
}
.el-input-normal-c {
  width: 300px;
  height: 40px;
  text-align: left;
}
.el-input-large-c {
  width: 500px;
  height: 40px;
  text-align: left;
}
.el-low-c {
  height: 40px;
  margin-bottom: 15px;
  text-align: left;
}
</style>